<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="./css/index.css"/>
	<script src="./js/jquery-3.2.1.min.js"></script>
	<script src="js/echarts.min.js"></script>
    <title>个人信息</title>
</head>
<body>
    <header>
    	<div class="lf">
    		<a class="home" href="index.html">系统首页</a>
    		<!-- <a href="bbs.html">论坛</a> -->
    		<a href="upload.html">上传资料</a>
    	</div>
    	<div id="search">
    		<input type="text" name="name" 
    			placeholder="请输入要搜索的资源" autocomplete="off"/>
			<a class="search btn">搜索</a>
    	</div>
    	
    	<div class="rf">
    		<div class="email-info">
				<b>99</b>
				<ul class="email-list">
					<li><a href="./message.html">官方<b>0</b></a></li>
					<li><a href="./message.html">通知<b>0</b></a></li>
					<li><a href="./message.html">私信<b>0</b></a></li>
				</ul>
			</div>
    		<a class="info" href="personal.html">个人中心</a>
    		<a class="cols" href="shoucang.html">收藏</a>
    		<a class="exit">退出登录</a>
    	</div>
    </header>
	
	<!-- 充值窗口 -->
	<div class="cvs" id="cvs2_logon" style="display:none">
		
		<div class="newModWin zfb-win">
			<section class="clearfix">
				<div class="title">支付宝快速充值兑换积分</div>
				<!-- 关闭弹出层 -->
				<div class="close" id="cvs2-close"></div>
			</section>
			
			<div class="zfb">
				<div class="clearfix">
					<input type="number" name="money" placeholder="请输入充值金额,单位元"/>
					<input type="button" class="zfb-btn" value="充值" />
				</div>
				<b>充值比例：1元=10积分</b>
			</div>
		</div>
	</div>
	<article>
		<!-- 网站主体 -->
		<div id="main" class="clearfix">
			<!-- 定义右侧窗口信息 -->
			<section class="aside">
				<aside class="users">
					<div class="pu">
						<p class="photo">
							<span class="lf">个人头像</span>
							<img class="rf" src="./images/user.jpg" />
							<!-- 单击头像，修改用户头像 -->
							<input type="file" name="" accept="image/png,image/jpeg,image/jpg,image/gif">
						</p>

						<p class="tel disable" >
							<span class="lf">手机号码</span>
							<span class="rf">133****1981</span>
						</p>
						
						<p class="nickname">
							<span class="lf">昵称</span>
							<span class="rf">─╀0vЁ灬残夜</span>
							
						</p>

						<p class="sex">
							<span class="lf">性别</span>
							<span class="rf">男</span>
						</p>

						<p class="email">
							<span class="lf">邮箱</span>
							<span class="rf">***@sina.com</span>
						</p>
						<a href="modifypass.html">
							<p class="password">
								<span class="lf">密码</span>
							</p>
						</a>
					</div>
					
				</aside>

				<!-- 修改 昵称的 窗口 -->
				<aside class="modify-win nickname">
					<div class="title"><i></i>修改-昵称</div>
					<div class="content">
						<input type="text" name="" value="─╀0vЁ灬残夜">
						<button>确定修改</button>
					</div>
				</aside>
				<!-- 修改 性别的 窗口 -->
				<aside class="modify-win sex">
					<div class="title"><i></i>修改-性别</div>
					<div class="content">
						<input type="radio" name="sex" value="m" checked id="c-sex-m"><label for="c-sex-m">男</label>
						<input type="radio" name="sex" value="f" id="c-sex-f"><label for="c-sex-f">女</label>
						<input type="radio" name="sex" value="s" id="c-sex-s"><label for="c-sex-s">保密</label>
						<button>确定修改</button>
					</div>
				</aside>
				<!-- 修改 邮箱的 窗口 -->
				<aside class="modify-win email">
					<div class="title"><i></i>修改-邮箱</div>
					<div class="content">
						<input type="text" name="" value="" placeholder="请输入原注册的邮箱">
						<input type="text" name="" value="" placeholder="请输入新的邮箱">
						<button>确定修改</button>
					</div>
				</aside>
				
				<!-- 关注数 -->
				<aside class="psl">
					<a class="focus-on" href="./attention.html">关注数:<b>3</b></a>
					<a class="fan">粉丝数:<b>8</b></a>
				</aside>
				
				<aside class="info">
					<h1>
						<a>用户积分:<b class="so">8</b></a>
						<a class="zfb-cz-btn" onclick="$('#cvs2_logon').show();">支付宝积分充值</a>
					</h1>
					<!-- 图表形式显示积分  -->
					<div id="user-score-mark" class="u-mark"></div>
				</aside>
			</section>
			<section>
				<h1 class="detail-score">积分明细</h1>
				<ul class="person-info">
					<li>
						<strong class="c1">资源名称</strong>
						<strong class="c2">积分变动</strong>
						<strong class="c3">原因</strong>
						<strong class="c4">时间</strong>
					</li>
					
					<!-- <li>
						<a>暂无数据</a>
					</li> -->
					<li>
						<a class="c1 link" href="./detail.html">java项目开发文档模板</a>
						<span class="c2">-10</span>
						<span class="c3"> - 下载资源扣除积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					<li>
						<a class="c1 link" href="./detail.html">软件开发计划书（是 一个完整的项目开发文档）</a>
						<span class="c2">-50</span>
						<span class="c3"> - 下载资源扣除积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="./detail.html">jquery封装好的验证码</a>
						<span class="c2">10</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1">&lt;&lt;无资源&gt;&gt;</a>
						<span class="c2">20</span>
						<span class="c3">- 用户注册赠送积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1">&lt;&lt;无资源&gt;&gt;</a>
						<span class="c2">200</span>
						<span class="c3">- 支付宝充值获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="./detail.html">基于s2sh带有进度条的文件上传</a>
						<span class="c2">2</span>
						<span class="c3">- 评论资源获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="./detail.html">Java_ME_中文帮助文档</a>
						<span class="c2">20</span>
						<span class="c3">- 用户注册赠送积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="./detail.html">Spring Cloud 2018最新_官网文档_中文参考手册_pdf</a>
						<span class="c2">-20</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="./detail.html">es6标准入门（第三版）_阮一峰.pdf</a>
						<span class="c2">5</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="./detail.html">Java_ME_中文帮助文档</a>
						<span class="c2">-5</span>
						<span class="c3">- 资源下载扣取积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="./detail.html">Spring Cloud 2018最新_官网文档_中文参考手册_pdf</a>
						<span class="c2">-20</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="./detail.html">es6标准入门（第三版）_阮一峰.pdf</a>
						<span class="c2">5</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="./detail.html">Spring Cloud 2018最新_官网文档_中文参考手册_pdf</a>
						<span class="c2">-20</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="./detail.html">es6标准入门（第三版）_阮一峰.pdf</a>
						<span class="c2">5</span>
						<span class="c3">- 资源被下载获得积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
					<li>
						<a class="c1 link" href="./detail.html">Java_ME_中文帮助文档</a>
						<span class="c2">-5</span>
						<span class="c3">- 资源下载扣取积分</span>
						<span class="c4">2021-09-13 22:06:01</span>
					</li>
					
				</ul>
				
				<!-- 分页 -->
				<div class="pagination">
					<a class="left"></a>
					<a class="act">1</a>
					<a>2</a>
					<a>3</a>
					<a>4</a>
					<a>5</a>
					<a class="right"></a>
					<select>
						<option>1/5</option>
						<option>2/5</option>
						<option>3/5</option>
						<option>4/5</option>
						<option>5/5</option>
					</select>
				</div>
			</section>
			
		</div>
	</article>
	<footer>
		<p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
		<p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
		<p class="num">沪ICP备14048333号</p>
	</footer>
	<script>
		$(function() {
			// 修改个人信息
			$(".users .pu").on("click", ".nickname, .sex, .email" , function(event){
				$(this).parents(".users").slideUp();
				let cls = this.className ;
				$(`.modify-win.${cls}`).slideDown()
			})
			// 取消修改信息效果
			$(".modify-win i").on("click", function(event){
				console.log($(this).parents(".modify-win"))
				$(this).parents(".modify-win").slideUp()
				$("aside.users").slideDown()
			})



			var option = {
				title: {
					text: '用户积分信息-积分统计',
					left: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)'
				},
				legend: {
					top: 'bottom',
					data: ['支付宝充值', '用户注册', '上传资源', '评论资源', '下载文件']
				},
				series: [
					{
						name: '积分来源',
						type: 'pie',
						radius: '50%',
						center: ['40%', '45%'],
						data: [
							{value: 335, name: '支付宝充值'},
							{value: 310, name: '用户注册'},
							{value: 234, name: '上传资源'},
							{value: 135, name: '评论资源'},
							{value: 1548, name: '下载文件'}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			
			echarts.init($("#user-score-mark").get(0)).setOption(option);
			
		})
		
		
		
		
	</script>
</body>

</html>